<template>
 <div>
   <div class="header">
     <span class="back" style="color: #333" @click="zhuye">&lt;</span>
   </div>
   <div class="icon">
     <img style="width: 75px" src="./img/index.jpg" alt="主题">
   </div>
   <div class="submit">
     <span @click="left_login">登录</span>
     <span style="color: #555;width: 1vw">|</span>
     <span @click="right_register">注册</span>
   </div>
   <transition :name="test">
     <router-view></router-view>
   </transition>
 </div>
</template>

<script>
export default {
  name: 'auth',
  data() {
    return {
      test: null,
    };
  },
  created() {},
  props: {},
  methods: {
    left_login() {
      this.test = 'test-left';
      this.$router.push('/login');
    },
    right_register() {
      this.test = 'test-right';
      this.$router.push('/register');
    },
    zhuye() {
      this.$router.push('/zhuye');
    },
  },
};
</script>

<style scoped lang="scss">
  .header span{
    display: inline-block;
  }
   .back{
     line-height: 35px;
     margin-left: 34px;
   }
   .welcome{
     margin-left: 9rem;
   }
   .icon img{
     display: block;
     margin: 172px auto;
   }
   .submit{
     font-size: 0;
     position: relative;
   }
   .submit span{
     color: dodgerblue;
     cursor: pointer;
     display: inline-block;
     width: 48%;
     font-size: 45px;
     text-align: center;
   }
  .test-left-enter{
    transform: translate(-100vw,0);
  }
  .test-left-leave-to{
    transform: translate(100vw, 0);
  }
  .test-left-enter-active, .test-left-leave-active{
    transition: all ease-in .3s;
  }
  .test-left-enter-to{
    transform: translate(0,0);
  }
  .test-left-leave{
    transform: translate(0,0);
  }

  .test-right-enter{
    transform: translate(100vw,0);
  }
  .test-right-leave-to{
    transform: translate(-100vw, 0);
  }
  .test-right-enter-active, .test-right-leave-active{
    transition: all ease-in .3s;
  }
  .test-right-enter-to{
    transform: translate(0,0);
  }
  .test-right-leave{
    transform: translate(0,0);
  }
</style>
